<template>
  <div class="scrollContainers" :id="id" @mouseenter="monseenter" @mouseleave="mouseleave">
    <slot></slot>
  </div>

</template>

<script>
  export default {
    name: "sign-scroll",
    props: {
      id: String
    },
    data() {
      return {
        timer: null
      };
    },
    methods: {
      init() {
        this.setTimer();
        // this.$once代表只执行一次。如果组件是在keep-alive中包裹，则需要更换函数
        // 被keep-alive包裹住的组件有两个生命周期函数：activated和deactivated
        this.$once('hook:beforeDestroy', () => {
          this.removeTimer();
        });
      },
      removeTimer() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
      setTimer() {
        this.removeTimer();
        this.timer = setInterval(() => {
          // pixel height：include el and padding    read only
          const scrollHeight = document.getElementById(this.id).scrollHeight;
          // visible area height：include el and padding  read only
          const clientHeight = document.getElementById(this.id).clientHeight;

          const heightDifference = scrollHeight - clientHeight;
          // scroll height：readable and writable
          document.getElementById(this.id).scrollTop++;

          // when el scroll to top
          if (document.getElementById(this.id).scrollTop >= heightDifference - 1) {
            this.removeTimer();
            // make it go back to original location after one second
            setTimeout(() => {
              document.getElementById(this.id).scrollTop = 0;
              this.setTimer();
            }, 1000);
          }
        }, 44);
      },
      monseenter() {
        this.removeTimer();
      },
      mouseleave() {
        this.setTimer();
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style>
  .scrollContainers::-webkit-scrollbar {
    width: 4px;
    background: rgba(0, 250, 255, 0.07);
  }
  /*进度条，进度块*/
  .scrollContainers::-webkit-scrollbar-thumb {
    background: rgba(0, 192, 255, 0.4);
    border-radius: 5px;
  }

  .scrollContainers {
    opacity: 0.9;
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
  }

  /* // 兼容IE */
  .scrollContainers {
    /*三角箭头的颜色*/
    scrollbar-arrow-color: #fff;
    /*滚动条滑块按钮的颜色*/
    scrollbar-face-color: #0099dd;
    /*滚动条整体颜色*/
    scrollbar-highlight-color: #0099dd;
    /*滚动条阴影*/
    scrollbar-shadow-color: #0099dd;
    /*滚动条轨道颜色*/
    scrollbar-track-color: #0066ff;
    /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
    scrollbar-3dlight-color: #0099dd;
    /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
    scrollbar-darkshadow-color: #0099dd;
    /*滚动条基准颜色*/
    scrollbar-base-color: #0099dd;
  }
</style>
